<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
	</head>
	<link rel="stylesheet" type="text/css" href="css/index.css"/>
	<body>
		<div class="page-container">
			<div class="header">
				<div class="header-href">
					<!--<a href="#"><img src="img/logo.png"></a>-->
					<p>WANG 我抄来的博客样式</p>
				</div>
				<div class="header-nav">
					<ul>
						<li><a href="#">首页</a></li>
						<li><a href="#">关于我</a></li>
						<li><a href="#">慢生活</a></li>
						<li><a href="#">碎言碎语</a></li>
						<li><a href="#">模板分享</a></li>
						<li><a href="#">学无止境</a></li>
						<li><a href="#">留言</a></li>
					</ul>
					
				</div>
			</div>
			<style type="text/css">

					
			</style>
			<div class="body">
				<div class="nav-banner">
					<ul>
						<li>
							<div class="nav-banner-img-container">
								
									<img class="img-previous-cover" src="img/t01.jpg">
									<a class="lllll" href="#"><img class="cover-img" src="img/yu.png">
									<span>此模板为PSD设计稿</span>
									</a>
								<p class="middle">这碗饭看着是不是很好吃</p>
								<p class="word">此模板为PSD设计稿，复古风格。首页主要突出产品，以及公司简介。手绘灯作为头部背景图片，这个比较特别。html可以做出灯一闪一闪的效果，或者说旁边有个按钮...</p>
							</div>
						</li>
						<li>
							<div class="nav-banner-img-container">
								<img class="img-previous-cover" src="img/t02.jpg">
								<a class="lllll" href="#"><img class="cover-img" src="img/yu.png">
								<span>此模板为PSD设计稿</span>
								</a>
								<p class="middle">这妹子是谁？</p>
								<p class="word">一共是四个页面，首页，图文列表，图片列表，文字内容。此模板风格为中国古典风格，山水画墨迹成就一幅江南墨卷。页面首页设计较为简单，突出文章重点。图文列表显示...</p>
							</div>
						</li>
						<li>
							<div class="nav-banner-img-container">
								<img class="img-previous-cover" src="img/t03.jpg">
								<a class="lllll" href="#"><img class="cover-img" src="img/yu.png">
								<span>此模板为PSD设计稿</span>
								</a>
								<p class="middle">这是不是扑了蛾子?</p>
								<p class="word">让世界拥有它的脚步，让我保有我的茧。当溃烂已极的心灵再不想做一丝一毫的思索时，就让我静静回到我的茧内，以回忆为睡榻，以悲哀为覆被，这是我唯一的美丽。</p>
							</div>
						</li>
					</ul>
					<div class="nav-body">
						<div class="nav-body-left">
							
							<div class="nav-left-word-container" id="nav-left-word-container">
								<div class="circle">
								</div>
								<p class="nav-left-word-top" id="nav-left-word-top">08-08</p>
								<p class="nav-left-word-end">2018</p>
								
							</div>
							
							
						</div>
						<div class="nav-body-center">
							<div class="triangle">
							</div>
						</div>
						<div class="nav-body-right-container">
							<div class="nav-body-right">
								<p class="title">宝昱</p>
								<img src="tongxue_img/baoyu.jpg" >
								<p>现在很多网站都有这种效果，我就整理了一下，分享出来。利用滚动条来实现动画效果，ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果，帮助你的网站增加吸引力...</p>
								<a href="#">阅读全文>></a>
							</div>
						</div>
					</div>
					<div class="nav-body">
						<div class="nav-body-left">
							<div class="nav-left-word-container" id="nav-left-word-container">
								
								<p class="nav-left-word-top" id="nav-left-word-top">10-02</p>
								<div class="circle">
								</div>
								<p class="nav-left-word-end">2018</p>
							</div>
						</div>
						<div class="nav-body-center">
							<div class="triangle">
							</div>
						</div>
						<div class="nav-body-right-container">
							<div class="nav-body-right">
								<p class="title">老六</p>
								<img src="tongxue_img/laoliu.jpg" >
								<p>现在很多网站都有这种效果，我就整理了一下，分享出来。利用滚动条来实现动画效果，ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果，帮助你的网站增加吸引力...</p>
								<a href="#">阅读全文>></a>
							</div>
						</div>
					</div>
					<div class="nav-body">
						<div class="nav-body-left">
							<div class="nav-left-word-container" id="nav-left-word-container">
								<div class="circle">
								</div>
								<p class="nav-left-word-top" id="nav-left-word-top">02-05</p>
								<p class="nav-left-word-end">2018</p>
							</div>
						</div>
						<div class="nav-body-center">
							<div class="triangle">
							</div>
						</div>
						<div class="nav-body-right-container">
							<div class="nav-body-right">
								<p class="title">老郑</p>
								<img src="tongxue_img/laozheng.jpg" >
								<p>现在很多网站都有这种效果，我就整理了一下，分享出来。利用滚动条来实现动画效果，ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果，帮助你的网站增加吸引力...</p>
								<a href="#">阅读全文>></a>
							</div>
						</div>
					</div>
					<div class="nav-body">
						<div class="nav-body-left">
							<div class="nav-left-word-container" id="nav-left-word-container">
								<div class="circle">
								</div>
								<p class="nav-left-word-top" id="nav-left-word-top">06-02</p>
								<p class="nav-left-word-end">2017</p>
							</div>
						</div>
						<div class="nav-body-center">
							<div class="triangle">
							</div>
						</div>
						<div class="nav-body-right-container">
							<div class="nav-body-right">
								<p class="title">解天</p>
								<img src="tongxue_img/xidtian.jpg" >
								<p>现在很多网站都有这种效果，我就整理了一下，分享出来。利用滚动条来实现动画效果，ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果，帮助你的网站增加吸引力...</p>
								<a href="#">阅读全文>></a>
							</div>
						</div>
					</div>
					<div class="nav-body">
						<div class="nav-body-left">
							<div class="nav-left-word-container" id="nav-left-word-container">
								<div class="circle">
								</div>
								<p class="nav-left-word-top" id="nav-left-word-top">01-01</p>
								<p class="nav-left-word-end">2017</p>
							</div>
						</div>
						<div class="nav-body-center">
							<div class="triangle">
							</div>
						</div>
						<div class="nav-body-right-container">
							<div class="nav-body-right">
								<p class="title">老郑</p>
								<img src="tongxue_img/laozheng2.jpg" >
								<p>现在很多网站都有这种效果，我就整理了一下，分享出来。利用滚动条来实现动画效果，ScrollReveal.js 用于创建和管理元素进入可视区域时的动画效果，帮助你的网站增加吸引力...</p>
								<a href="#">阅读全文>></a>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="footer">
				Design by 仿的，我自己布局，我仿着做的，。
			</div>
		</div>
	</body>
	<!--<script type="text/javascript">
		var s = document.getElementById('nav-left-word-container');
		var clo = '';
		s.onmouseover = function(){
			var a = document.getElementById('nav-left-word-top');
			clo = a.style.color;
			a.style.color='white';
		}
		s.onmouseout = function(){
			var a = document.getElementById('nav-left-word-top');
			a.style.color=clo;
		}
	</script>-->
</html>